<template>
  <div class="page-nation">
    <Page 
      :total="total" 
      :model-value="currentPage" 
      :page-size="pageSize"  
      size="default" 
      @on-change="handleCurrentChange " 
      @on-page-size-change="handleSizeChange" 
      show-elevator="true" 
      show-sizer 
      prev-text="上一页"
      next-text="下一页"
      show-total
      layout="total, sizes, prev, pager, next, jumper"
       > 
    </Page>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const props = defineProps({
  showCount: {
    type: Number,
    default: 10,
  },
  total: {
    type: Number,
    default: 0,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})
let currentPage = ref(1)
let pageSize = ref(10)

// 子向父传值
const emit = defineEmits(['size-change', 'current-change'])

defineExpose({
  currentPage: currentPage.value,
  pageSize: pageSize.value,
})
const handleSizeChange = (val: number) => {
  pageSize.value = val
  emit('size-change', val)
  console.log('val', val)
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  emit('current-change', val)
}
</script>

<style scoped>
.page-nation {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-top: 20px;
}
li.ivu-page-item.ivu-page-item-active {
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>
